<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE-edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    #app {
      width: 600px;
      margin: 10px auto;
    }

    .tb {
      border-collapse: collapse;
      width: 100%;
    }

    .tb th {
      background-color: #0094ff;
      color: white;
    }

    .tb td,
    .tb th {
      padding: 5px;
      border: 1px solid black;
      text-align: center;
    }

    .tb img {
      width: 100px;
      height: 100px;
    }

    .add {
      padding: 5px;
      border: 1px solid black;
      margin-bottom: 10px;
    }
    .addItem{
      width: 600px;
      border: 1px solid #000;
    }
    .search{
      width: 600px;
      height: 30px;
      border: 1px solid #000;
      margin: 20px auto;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="addItem">
      编号：<input type="text" v-model="newItem.code"> 品牌名称：<input type="text" v-model="newItem.productName"><br>
      产品图片地址：<input type="text" v-model="newItem.imgSrc"> 价格：<input type="text" v-model="newItem.price">
      <button class="add" @click="addItem">添加</button>
    </div>
    <div class="search">
      品牌名称：<input type="text" v-model="searchTerm" placeholder="请输入搜索条件">
    </div>
    <table class="tb">
      <thead>
        <tr>
          <th>
            <input type="checkbox" name="" id="" />
          </th>
          <th>产品图片</th>
          <th>编号</th>
          <th>品牌名称</th>
          <th>价格</th>
          <th>数量</th>
          <th>操作</th>
        </tr>
      </thead>

      <tbody>
        <tr v-for="item in filteredList" :key="item.id">
          <td>
            <input type="checkbox" name="" id="" />
          </td>
          <td>
            <img :src="item.imgSrc" alt="" />
          </td>
          <td>{{ item.code }}</td>
          <td>{{ item.productName }}</td>
          <td>
            {{ item.count * item.price }}
          </td>
          <td>
            <button @click="decrementCount(item)">-</button>
            {{ item.count }}
            <button @click="incrementCount(item)">+</button>
          </td>
          <td>
            <button @click="removeItem(item.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <script src="../../lib/vue3.js"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          list: [
            {
              id: 1,
              code: 1,
              imgSrc: "https://hello-1253323335.cos.ap-guangzhou.myqcloud.com/pic_1.jpeg",
              productName: "坤坤的背带裤",
              price: 9.9,
              count: 1
            },
            {
              id: 2,
              code: 2,
              imgSrc: "https://hello-1253323335.cos.ap-guangzhou.myqcloud.com/pic_2.jpeg",
              productName: "品如的衣服",
              price: 19.9,
              count: 1
            },
            {
              id: 3,
              code: 3,
              imgSrc: "https://hello-1253323335.cos.ap-guangzhou.myqcloud.com/pic_3.jpeg",
              productName: "秀儿的秋裤",
              price: -9.9,
              count: 1
            },
          ],
          newItem: {
            code: "",
            productName: "",
            imgSrc: "",
            price: ""
          },
          searchTerm: ""
        }
      },
      methods: {
        addItem() {
          if (this.newItem.code && this.newItem.productName && this.newItem.imgSrc && this.newItem.price) {
            const newItem = {
              id: this.list.length + 1,
              code: this.newItem.code,
              imgSrc: this.newItem.imgSrc,
              productName: this.newItem.productName,
              price: parseFloat(this.newItem.price),
              count: 1
            };
            this.list.push(newItem);
            this.newItem = {
              code: "",
              productName: "",
              imgSrc: "",
              price: ""
            };
            
          }
        },
        removeItem(id) {
          this.list = this.list.filter(item => item.id !== id);
        },
        incrementCount(item) {
          // 增加产品数量
          item.count++;
        },

        decrementCount(item) {
          // 减少产品数量
          if (item.count > 0) {
            item.count--;
          }
        }
      },
      computed: {
        filteredList() {
          if (this.searchTerm) {
            return this.list.filter(item => item.productName.includes(this.searchTerm));
          } else {
            return this.list;
          }
        }
      }
    })
    app.mount('#app')
  </script>
</body>

</html>
